// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//loadsh 引用方法
import lodash from 'lodash' 
window.lodash = lodash

Vue.use(ElementUI);
Vue.config.productionTip = false

/*
场景一：已经登陆过的用户，再次进入login页面，直接跳到homePage

场景二：没有登录过的用户，进入非login页面，跳到login页

场景三: 当用户以登录,不去点击左侧列表的导航时，而是在地址栏输入没权限看的链接时，提示其无权限访问，比如admin1，authList是他可以访问的地址，但是他并没/homepage/user/add这个打开的权限 
需要了解：ES6的includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

解决思路：根据menuInfo获取到已登录用户,将想访问的链接跟可访问链接的内容（用户的authtlist）进行对比，如果存在则可以访问 不存在则提示无权限 用户可访问链接存在用户信息的authList
//只根据menuInfo来判读是否登录 现在我把其中的authList删除了，不删除menuInfoauthList就会是null authList.split 就会报错

(可选)解决插件：lodashjs 安装方法 npm i --save lodash 参考链接：https://www.lodashjs.com/
*/


router.beforeEach((to, from, next) => {//to:到哪个页面去，from:从哪个页面来,next:下一步做什么
	console.log(to);
	let menuInfo = localStorage.getItem("menuInfo");//已登录后左侧导航列表
	let authList = localStorage.getItem("authList");//已登录后可访问链接的地址
	//把这两个都存在判断为用户登录过
	if(menuInfo&&authList){//根据是否有menuInfo判断是否登录
		let authArr = authList.split(',');
		console.log(authList);
	    console.log(authArr);
		if(to.name=='loginPage'){//已登录还去login页面？
			next({path: '/'});//直接让他去主页homePage
		}else{
			if(!authArr.includes(to.path)&&to.name!='homePage'){
				alert('暂无权限访问');
				return ;
			}
			next();
		}			
	}else{
		if(to.name!='loginPage'){//判断是否进入非login页面
			next({path: '/login'});//没有登录的
		}else{
			next();//没登录后进入login页面
		}	 
	}
})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

